<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getpocInfoAPI } from '@/api/search/index'
import { ArrowDown } from '@element-plus/icons-vue'
const props = defineProps({
  id: { type: String, required: true }
})

const exp = ref([])
const poc = ref([])

const getInfo = (id: string) => {
  getpocInfoAPI(id).then((res) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      poc.value = data.poc
      exp.value = data.exp
    }
  })
}

onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div class="title">漏洞排查</div>
  <div class="card">
    <div class="header">PoC</div>
    <div class="content">
      <div class="title">公开PoC({{ poc.length }})</div>
      <div class="desc">
        <div class="item" v-for="item in poc" :key="item.id">
          <p>{{ item.name }}</p>
          <p>
            来源：
            <jm-link :href="item.url">{{ item.url }}</jm-link>
          </p>
          <jm-button link type="primary" :icon="ArrowDown" class="btn"> 查看详情 </jm-button>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="card">
    <div class="header">公开ExP详情</div>
    <div class="content">
      <div class="title">公开ExP({{ exp.length }})</div>
      <div class="desc">
        <div class="item" v-for="item in exp" :key="item.id">
          <p>{{ item.name }}</p>
          <p>
            来源：
            <jm-link :href="item.url">{{ item.url }}</jm-link>
          </p>
          <jm-button link type="primary" :icon="ArrowDown" class="btn"> 查看详情 </jm-button>
        </div>
      </div>
    </div>
  </div> -->
  
</template>
<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
}
.title {
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.card {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
  .header {
    padding: 0.625rem 1.875rem;
    background: var(--el-color-info-light-8);
  }
  .content {
    padding: 1.875rem;
    background: var(--el-color-info-light-9);
    .desc {
      .item {
        position: relative;
        margin-bottom: 1.25rem;
        border-left: 3px solid var(--el-color-info-light-8);
        padding-left: 1.25rem;
        .btn {
          position: absolute;
          right: 0;
          bottom: 0;
        }
        p {
          margin-bottom: 0.625rem;
        }
      }
    }
  }
}
</style>
